<template>
	<!-- 密码框 -->
	<view class="dialogo"  @click="closePassword" @touchmove.prevent>
		<view class="password_box" @click.stop="">
			<view class="password_title">请输入交易密码</view>
			<view class="password_tips">您使用了神椰数字资产请进行验证</view>
			<view class="password_num">
				<view class="password_zi" v-for="(item, index) in 6" :key="index">
					<view :class="{'passwordOn':password[index]}"></view>
				</view>
			</view>
			<view class="digital_keyboard">
				<view class="keyboard_kuagn" v-for="(el,elindex) in numberBox" :key="elindex">
					<view class="otherbg" v-if="el.id == 10"></view>
					<view class="delete" v-else-if="el.id == 12" @tap="deleteNum(el)"></view>
					<view v-else class="keyboard_num" @tap="clickNum(el)">{{el.num}} </view>
				</view>
			</view>
			<view style="width: 100%;height: 50rpx; "></view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"password-box",
		props: {
		  visible: {
				type: Boolean,
				default: false
			},
		},
		data() {
			return {
				password: '', //交易密码
				numberBox: [{
						id: 1,
						num: '1'
					},
					{
						id: 2,
						num: '2'
					},
					{
						id: 3,
						num: '3'
					},
					{
						id: 4,
						num: '4'
					},
					{
						id: 5,
						num: '5'
					},
					{
						id: 6,
						num: '6'
					},
					{
						id: 7,
						num: '7'
					},
					{
						id: 8,
						num: '8'
					},
					{
						id: 9,
						num: '9'
					},
					{
						id: 10,
						num: ''
					},
					{
						id: 11,
						num: '0'
					},
					{
						id: 12,
						num: ''
					},
				],
			};
			
		},
		created() {
			console.log(this.visible)
		},
		watch:{
			// H5 下禁止底部滚动
			visible:{
				handler: function(show) {
					console.log(show)
					// #ifdef H5
					// fix by mehaotian 处理 h5 滚动穿透的问题
					  // document.getElementsByTagName('body')[0].style.overflow = show ? 'hidden' : 'visible'
					// #endif
				},
				immediate: true
			}
		},
		methods:{
			closePassword() { //关闭密码弹窗
				// this.setPasswordStatus = false
				// this.password = ''
				// #ifdef H5
				   // fix by mehaotian 处理 h5 滚动穿透的问题
				   // document.getElementsByTagName('body')[0].style.overflow = 'visible'
				// #endif
				 this.$emit("update:visible", false);
				// this.$emit('closePassword',password)
			},
			clearPassword(){
				this.password = ''
			},
			// 点击密码操作
			clickNum(key) {
				if (this.password.length < 6) {
					this.password += key.num
					if (this.password.length === 6) {
						 this.$emit('confirmPassword',this.password)
						// console.log(this.password)
						// this.wxPay()
						// 密码验证操作	
						// this.handlePay(1)
						// console.log(this.password,'37')
						// this.$.open('/trait/details');
					}
				}
			
			},
			deleteNum() { //密码输入删除
				if (this.password.length > 0) {
					this.password = this.password.substring(0, this.password.length - 1)
				}
			},
		}
	}
</script>

<style scoped>
   /* 支付 */
	.dialogo {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: 999;
		background: rgba(0, 0, 0, 0.6);
	}
	
	.password_box {
		position: absolute;
		bottom: 0;
		width: 100%;
		height: 800rpx;
		background: #F5F5F6;
	}
	.password_title {
		background: #ffffff;
		font-size: 32rpx;
		color: #222222;
		width: 100%;
		text-align: center;
		padding: 40rpx 0 24rpx;
		font-weight: bold;
	}
	.password_tips{
		font-size: 28rpx;
		color: #666666;
		background-color: #FFFFFF;
		text-align: center;
		padding-bottom: 40rpx;
	}
	
	.password_num {
		background: #ffffff;
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	
	}
	
	.password_zi:first-child {
		border-left: 2rpx solid #A5A8BB;
	}
	
	.password_zi {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 116rpx;
		height: 116rpx;
		border-top: 2rpx solid #A5A8BB;
		border-bottom: 2rpx solid #A5A8BB;
		border-right: 2rpx solid #A5A8BB;
	}
	
	.passwordOn {
		width: 28rpx;
		height: 28rpx;
		border-radius: 50%;
		background: #222222;
	}
	
	.digital_keyboard {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		padding-top: 60rpx;
		background: #ffffff;
	}
	
	.keyboard_kuagn {
		font-size: 56rpx;
		color: #030303;
		width: 248rpx;
		height: 108rpx;
		background: #fff;
	
		border-top: 2rpx solid #F5F5F6;
		border-right: 2rpx solid #F5F5F6;
		/* border-bottom: 2rpx solid #F5F5F6; */
	}
	
	.delete {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
		background: #F5F5F6 url('https://kayouyou-1257308601.cos.ap-guangzhou.myqcloud.com/1cbb5963d0094664baf49bd98b6afef8.png') no-repeat;
		background-size: 100% 100%;
	}
	
	.otherbg {
		width: 100%;
		height: 100%;
		background: #F5F5F6;
	}
	
	.keyboard_num {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.keyboard_num:active{
		background: rgba(0, 0, 0, 0.1);
	}
	
	/* end */
</style>